<template>
<el-dialog
    :visible.sync="isShowBom"
    destroy-on-close
    title="添加BOM信息"
    width="80%"
    top="60px"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
  <div class="app-container" >
    <el-transfer filterable v-model="value" :data="data" :titles="['产品 SKU 列表', '已选中的 BOM 信息']"></el-transfer>
  </div>
</el-dialog>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      data: [],
      isShowBom:true,
      value: [1, 4]
    };
  },
  watch: {
    isShowBom: function() {
      this.$emit("input", null);
    }
  },
  created() {
    // this.onSearchBtnClick();
    this.data = this.generateData()
  },
  methods: {
    generateData(){
      const data = [
        {key:1,label:'钢材SKU-1 长:10cm;宽:20cm;高15cm;其他属性:限制性材料;'},
      {key:2,label:'钢材SKU-2 长:10cm;宽:20cm;高15cm'},
      {key:3,label:'钢材SKU-3 长:10cm;宽:20cm;高15cm'},
      {key:4,label:'钢材SKU-4 长:10cm;宽:20cm;高15cm'},
      {key:5,label:'钢材SKU-5 长:10cm;宽:20cm;高15cm'},
      {key:6,label:'钢材SKU-6 长:10cm;宽:20cm;高15cm'},
      {key:7,label:'钢材SKU-7 长:10cm;宽:20cm;高15cm'},
      {key:8,label:'钢材SKU-8 长:10cm;宽:20cm;高15cm'},
      {key:9,label:'钢材SKU-9 长:10cm;宽:20cm;高15cm'},
      {key:10,label:'钢材SKU-10 长:10cm;宽:20cm;高15cm'},
      {key:11,label:'钢材SKU-11 长:10cm;宽:20cm;高15cm'},
      {key:12,label:'钢材SKU-12 长:10cm;宽:20cm;高15cm'}];
      return data;
    }
    // onSearchBtnClick() {
    //   this.tableData = this.data.list;
    //   this.total = this.data.total;
    // },

    // handlePageChange({ currentPage, pageSize }) {
    //   this.formData.currentPage = currentPage;
    //   this.formData.pageSize = pageSize;
    //   this.onSearchBtnClick();
    // },
    // addBomToList(row){
    //   this.$emit('addBomList',row);
    // }

  }
};
</script>

<style >
.el-transfer-panel {
    width: 460px;
}
.el-transfer-panel__body {
    height: 500px;
    width: 100%;
    overflow: auto;
}
.el-transfer-panel__list {
    height: 100%;
    width:470px;

}
.el-transfer-panel__list.is-filterable {
    height: 437px;
    width: 100%;
}
.el-transfer-panel__item.el-checkbox .el-checkbox__label {
    width: 100%;
    overflow: inherit;
    text-overflow: inherit;
}
</style>
